<template>
  <div id="stu">
    <!-- <el-button size="mini" @click="add()">Add</el-button> -->
    <div class="search">
      <el-select v-model="searchkind">
        <el-option label="姓名" value="name"></el-option>
        <el-option label="医疗卡号" value="medicalCarId"></el-option>
        <el-option label="日期" value="date"></el-option>
      </el-select>
      <el-input
        v-model="searchkey"
        v-if="searchkind != 'date'"
        style="width:200px;"
      ></el-input>
      <el-date-picker
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期"
        v-if="searchkind == 'date'"
        v-model="searchkey"
        style="width:200px;"
      ></el-date-picker>

      <el-button size="mini" @click="getdata(1, searchkind, searchkey)"
        >查询</el-button
      >
      <el-button size="mini" @click="getdata(1)">重置</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="病人卡号" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.treat.personsNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="病人姓名" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.personName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="药方号" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.treat.billNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开方日期" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.treat.treatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开方医生编号" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.doctor }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开方医生姓名" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.doctorName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="药方价格" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.treat.mediTotal }}元</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="
              chufaninfo(scope.$index, scope.row.treat.billNo)
            "
            type="text"
            size="small"
          >
            详情
          </el-button>

          <el-button
            @click.native.prevent="
              deleteRow(scope.$index, scope.row.treat.billNo)
            "
            type="text"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="pages"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ADD from "@/components/add&rewriter";
import { mapActions, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      indexMethod: "",
      tableData: [],
      pages: 0 * 10,
      isshow: false,
      //弹出框的值
      fromtitle: null,
      kind: null,
      theID: null,
      from: {},
      searchkey: "",
      searchkind: "",
      searchdata: {},
      limit: 3
    };
  },

  mounted() {
    // this.countpage();
    this.getdata(1);
  },
  methods: {
    ...mapActions(["tongyong"]),
    // async countpage(page, kind, val) {
    //   this.searchdata1 = {
    //     limit: 0,
    //     page: 0
    //   };
    //   if (kind != "" && val != "") {
    //     console.log(kind, val);
    //     this.searchdata1[kind] = val;
    //   }
    //   const res = await this["tongyong"]({
    //     name: "GET_BINRENGRIJI",
    //     data: this.searchdata1
    //   });
    //   this.pages = Math.ceil((res.data.data.length * 10) / 3);
    //   console.log(res.data.data.length);
    // },
    async getdata(page, kind, val) {
      this.searchdata1 = {
        limit: 0,
        page: 0
      };
      if (!!kind && !!val) {
        this.searchdata1[kind] = val;
      }
      const res1 = await this["tongyong"]({
        name: "GET_BINRENGRIJI",
        data: this.searchdata1
      });
      this.pages = Math.ceil((res1.data.data.length * 10) / 3);

      this.searchdata.limit = this.limit;
      if (!!kind && !!val) {
        this.searchdata.limit = 0;
        this.searchdata[kind] = val;
      }
      this.searchdata.page = page;
      console.log(5555, this.searchdata);
      const res = await this["tongyong"]({
        name: "GET_BINRENGRIJI",
        data: this.searchdata
      });
      this.tableData = res.data.data;
    },

    async deleteRow(a, b) {
      const res = await this["tongyong"]({
        name: "GET_DELCHUFANG",
        data: { billNo: b }
      });
      console.log(res);
      if (res.status == 200) {
        // this.countpage();
        this.getdata(1);
      }

      // console.log(this.newpage);
    },
    chufaninfo(a, b) {
      this.$router.push({
        name: "stu",
        query: {
          billno: b
        }
      });
    },
    handleCurrentChange(val) {
      this.getdata(val);
    }
  }
};
</script>

<style>
#stu {
  min-width: 450px;
}
.el-pagination {
  float: right;
}
.pagination {
  margin-top: 10px;
  float: right;
  width: 100%;
  background: white;
}
.search {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.el-button + .el-button {
  margin: 0;
}
</style>
